<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-25">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/notice">通知管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加通知</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form ref="form" :model="form" label-width="80px" class="m-t-10">
            <el-form-item label="通知分类">
                <el-input ref="type" v-model="form.type" placeholder="请输入通知分类"></el-input>
            </el-form-item>

            <el-form-item label="通知标题">
                <el-input ref="title" v-model="form.title" placeholder="请输入通知标题"></el-input>
            </el-form-item>

            <el-form-item label="通知内容">
                <Editor :value="editorValue" @change="changeEditor"></Editor>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submit">添加</el-button>
                <el-button type="danger" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        post
    } from '@/network/request'
    import Editor from '@/components/Editor'
    export default {
        name: 'AddNotice',
        data() {
            return {
                form: {
                    type: '',
                    title: '',
                    content: ''
                },
                editorValue: ''
            }
        },
        components: {
            Editor
        },
        methods: {
            changeEditor(val) {
                this.form.content = val
            },
            submit() {
                if (this.form.type == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入通知分类',
                        offset: 60
                    })
                    this.$refs['type'].focus()
                    return false
                }
                if (this.form.title == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入通知标题',
                        offset: 60
                    })
                    this.$refs['title'].focus()
                    return false
                }
                if (this.form.content == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入通知内容',
                        offset: 60
                    })
                    this.$refs['content'].focus()
                    return false
                }
                post('/addNotice', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '通知添加成功',
                            offset: 60
                        })
                        this.$router.push('/notice')
                    }
                }).catch()
            },
            cancel() {
                this.$router.push('/notice')
            }
        }
    }
</script>

<style scoped>

</style>